<div class="cell checkbox">
  <mat-checkbox
    color="primary"
    [ixTest]="instance().name"
    [checked]="selected()"
    (click)="$event.stopPropagation()"
    (change)="selectionChange.emit()"
  ></mat-checkbox>
</div>

<div class="cell cell-name">
  <span class="name">{{ instance().name }}</span>
</div>

<div class="cell cell-status">
  <ix-instance-status-cell
    [instance]="instance()"
  ></ix-instance-status-cell>
</div>

<div class="cell">{{ instance().type | mapValue: typeLabels | translate }}</div>

<div class="cell actions">
  @if (isStopped()) {
    <button
      *ixRequiresRoles="requiredRoles"
      mat-icon-button
      matTooltipPosition="above"
      [ixTest]="[instance().name, 'start']"
      [matTooltip]="'Start' | translate"
      (click)="$event.stopPropagation(); start()"
    >
      <ix-icon name="mdi-play-circle"></ix-icon>
    </button>
  } @else {
    <button
      *ixRequiresRoles="requiredRoles"
      mat-icon-button
      matTooltipPosition="above"
      [ixTest]="[instance().name, 'restart']"
      [matTooltip]="'Restart' | translate"
      (click)="$event.stopPropagation(); restart()"
    >
      <ix-icon name="mdi-restart"></ix-icon>
    </button>

    <button
      *ixRequiresRoles="requiredRoles"
      mat-icon-button
      matTooltipPosition="above"
      [ixTest]="[instance().name, 'stop']"
      [matTooltip]="'Stop' | translate"
      (click)="$event.stopPropagation(); stop();"
    >
      <ix-icon name="mdi-stop-circle"></ix-icon>
    </button>
  }
  <ix-icon class="instance-details" name="mdi-chevron-right"></ix-icon>
</div>
